import 'braft-editor/dist/index.css'
import React from 'react'
import BraftEditor from 'braft-editor'
import { ContentUtils } from 'braft-utils'
import { ImageUtils } from 'braft-finder'
import { FileImageOutlined } from '@ant-design/icons';
import { Upload } from 'antd'
import '@/style/view-style/editor.less'

export default class UploadDemo extends React.Component {

    state = {
        editorState: BraftEditor.createEditorState(null)
    }

    handleChange = (editorState) => {
        this.setState({ editorState })
    }

    uploadHandler = (param) => {
        if (!param.file) {
            return false
        }
        let formdata = new FormData()
        formdata.append('file', param.file)
        React.$post2('/multimedia/filez/news/upload',formdata).then(res=>{
            console.log(res)
        })
        /*this.setState({
            editorState: ContentUtils.insertMedias(this.state.editorState, [{
                type: 'IMAGE',
                url: 'http://img1.gtimg.com/ninja/2/2021/02/ninja161251746162033.jpg'
            }])
        })*/
    }

    render () {
        const controls = [
            'undo', 'redo', 'separator',
            'font-size',
            'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
            'superscript', 'subscript', 'remove-styles', 'emoji', 'separator', 'text-indent', 'text-align', 'separator',
            'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
            'link', 'separator', 'hr', 'separator',
            'separator',
            'clear'
        ]
        const extendControls = [
            {
                key: 'antd-uploader',
                type: 'component',
                component: (
                    <Upload
                        accept="image/*"
                        showUploadList={false}
                        customRequest={this.uploadHandler}
                    >
                        {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
                        <button type="button" className="control-item button upload-button" data-title="插入图片">
                            <FileImageOutlined />
                        </button>
                    </Upload>
                )
            }
        ]

        return (
            <div>
                <div className="editor-wrapper">
                    <BraftEditor
                        value={this.state.editorState}
                        onChange={this.handleChange}
                        controls={controls}
                        extendControls={extendControls}
                    />
                </div>
            </div>
        )

    }

}